<template>
  <view>
  <view class="header">
    <view class="back" @click="back()">
      <uni-icons type="left" size="20"></uni-icons>
    </view>
    <text>发布动态</text>
  </view>

    <view class="textInfo">
      <input type="text" class="title" placeholder="请输入标题" placeholder-class="titlePlaceholder" maxlength="20"
        v-model="title" />
      <textarea class="main" maxlength="150" placeholder="请输入正文" placeholder-class="mainPlaceholder" v-model="content"
        @input='changeTextNumber'></textarea>
      <view class="font-number">
        {{contentNum}}/150
      </view>
    </view>
    <view class="imageInfo" v-if="url !=''">
        <image :src="url"></image>
     <!-- <view class="addImage" @click="addImage()">
        <uni-icons type="plusempty" size="22" color="#ccc"></uni-icons>
      </view> -->
    </view>

    <view class="footer">
      <view class="submit" @click="submit()">
        发布
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        url: '',
        title: '',
        content: '',
        contentNum: 0
      };
    },
    onLoad(options) {
      this.url = options.url || ''
      console.log(this.url);
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      // addImage() {
      //   const that = this
      //   uni.chooseImage({
      //     count: 9 - that.urls.length,
      //     sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      //     sourceType: ['album'], //从相册选择
      //     success: function(res) {
      //       that.urls = [...that.urls, ...res.tempFilePaths]
      //     },
      //   });
      // },
      changeTextNumber(e) {
        this.contentNum = e.detail.value.length
      },
      async submit() {
        const that = this
        if (this.url == '') {
          const postObj = {
            userid: that.userInfo.studentId,
            title: that.title,
            content: that.content,
            posttype: 0,
            cut: 18
          }
          await uni.$http.post('/users/post/addTextPost', postObj)
        } else {
          uni.uploadFile({
            url: `http://localhost:8080/users/post/addPicpost?userid=${that.userInfo.studentId}&title=${that.title}&content=${that.content}&posttype=1&cut=18`, //仅为示例，非真实的接口地址
            filePath: that.url,
            name: 'files',
            formData: {},
            header: {
              token: this.token,
            },
            success: (uploadFileRes) => {
              console.log(uploadFileRes.data);
            },
            fail: (err) => {
              // 接口调用失败的回调函数  
              console.error('uploadFile fail:', err);
            }
          });


        }
        this.back()
        return uni.$showMsg('发布成功');
      }
    },
    computed: {
      ...mapState('my_user', ['userInfo', 'token'])
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .header {
    position: relative;
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
    background-color: #fff;
  
    .back {
      position: absolute;
      top: 4rpx;
      left: 23rpx;
      height: 50rpx;
    }
  }

  .textInfo {
    position: relative;
    width: 100%;
    height: 500rpx;
    font-size: 36rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    background-color: #fff;

    .titlePlaceholder {
      color: #ccc;
    }

    .mainPlaceholder {
      color: #ddd;
    }

    .title {
      height: 90rpx;
      font-size: 36rpx;
      border-bottom: 1rpx solid #eee;
    }

    .main {
      height: 500rpx;
      margin-top: 30rpx;
      font-size: 30rpx;
    }

    .font-number {
      position: absolute;
      bottom: 20rpx;
      right: 20rpx;
      font-size: 30rpx;
      color: #999;
    }
  }

  .imageInfo {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10rpx;
    padding-left: 30rpx;
    border-radius: 10rpx;
    background-color: #fff;
    overflow: hidden;

    image {
      width: 210rpx;
      height: 210rpx;
      margin-bottom: 20rpx;
      margin-left: 20rpx;
    }

    .addImage {
      width: 210rpx;
      height: 210rpx;
      margin-bottom: 20rpx;
      margin-left: 20rpx;
      background-color: #eee;
      text-align: center;
      line-height: 210rpx;
    }
  }

  .footer {
    position: absolute;
    bottom: 50rpx;
    width: 100%;
    height: 100rpx;

    .submit {
      width: 80%;
      margin: 0 auto;
      text-align: center;
      line-height: 100rpx;
      border-radius: 50rpx;
      color: #fff;
      background-color: #b6eaae;
    }
  }
</style>